*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 整体容器 */
.search-bar-container {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

/* 搜索输入框容器 */
.input-wrapper {
  position: relative;
  height: 36px;
  margin-bottom: 12px;
}

/* 搜索输入框 */
.search-input {
  width: 100%;
  height: 100%;
  padding: 0 32px;
  border: 1px solid #dee2e6;
  border-radius: 18px;
  background: #ffffff;
  font-size: 14px;
  -webkit-appearance: none; /* 去除iOS默认输入样式 */
}

/* 搜索图标（用伪元素模拟） */
.search-input::placeholder {
  color: #adb5bd;
}
.input-wrapper::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236c757d" width="16px" height="16px"><path d="M20.3 18.9l-4.1-4c.9-1.2 1.4-2.6 1.4-4.1 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4.1-1.4l4 4.1c.2.2.5.3.7.3.2 0 .5-.1.7-.3.4-.4.4-1 0-1.4zm-13.3-1.9c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z"/></svg>');
}

/* 筛选按钮容器 */
.filter-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* 通用筛选按钮 */
.filter-btn {
  padding: 4px 12px;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background: #ffffff;
  color: #495057;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.filter-btn:hover {
  background: #f1f3f5;
}

/* 下拉箭头图标 */
.arrow-icon {
  width: 12px;
  height: 12px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236c757d" width="12px" height="12px"><path d="M7.4 8.7l4.6 4.6 4.6-4.6c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-5.3 5.3c-.4.4-1 .4-1.4 0l-5.3-5.3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0z"/></svg>');
}

/* 频道下拉容器 */
.channel-btn-wrapper {
  position: relative;
}
.channel-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 180px;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 8px 0;
  z-index: 100;
}

/* 下拉选项 */
.dropdown-item {
  padding: 8px 16px;
  font-size: 13px;
  color: #495057;
  cursor: pointer;
  transition: background 0.2s;
}
.dropdown-item:hover {
  background: #f8f9fa;
}
.dropdown-item:active {
  background: #e9ecef;
}

/* 频道下拉标签容器（支持换行） */
.channel-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

/* 频道标签基础样式（类似TagSelector的标签） */
.channel-tag {
  padding: 4px 12px;
  border: none;
  border-radius: 12px;
  background-color: #f0f0f0; /* 浅灰背景 */
  color: #333; /* 深灰文字 */
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 选中状态样式 */
.channel-tag.active {
  background-color: #007BFF; /* 品牌蓝色 */
  color: #ffffff; /* 白色文字 */
  transform: scale(1.05);
}

/* 调整下拉容器宽度（适配标签摊开） */
.channel-dropdown {
  width: 90vw; /* 手机端宽度占满屏幕90% */
  max-width: 360px; /* 最大宽度限制 */
  left: 50%;
  transform: translateX(-50%); /* 居中显示 */
}

/* 移动端适配（屏幕宽度≤768px） */
@media (max-width: 768px) {
  /* 调整整体容器内边距 */
  .search-bar-container {
    padding: 8px 12px;
  }

  /* 增大搜索输入框高度（提升触摸区域） */
  .input-wrapper {
    height: 40px;
  }
  .search-input {
    font-size: 15px;
    padding: 0 36px; /* 增加左右内边距避免文字贴边 */
  }

  /* 调整筛选按钮样式（增大触摸区域） */
  .filter-btn {
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 16px; /* 更圆润的圆角 */
  }
  .arrow-icon {
    width: 14px; /* 增大箭头图标 */
    height: 14px;
  }

  /* 优化频道下拉定位（避免被底部截断） */
  .channel-dropdown {
    top: calc(100% + 6px);
    max-width: 94vw; /* 更贴合小屏幕宽度 */
  }

  /* 调整标签间距和尺寸（提升移动端点击体验） */
  .channel-tags-container {
    gap: 10px; /* 增大标签间距 */
    padding: 10px 12px;
  }
  .channel-tag {
    padding: 6px 14px; /* 增大标签内边距 */
    font-size: 14px;
    border-radius: 14px;
  }
  .channel-tag.active {
    transform: scale(1.03); /* 减小放大幅度避免溢出 */
  }
}